<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
         
          <el-table :data="tableDataProject"           
            
            border
            style="width: 100%">
            <el-table-column   
              label="项目名称"
              >
              <template slot-scope="scope">
                <div class = "title_cls"><el-link type="primary" @click="handleShowBiddetail"> {{scope.row.projectName}}</el-link></div>
              </template>
            </el-table-column>
            <el-table-column  prop="projectCode"             
              label="项目编码"
              width="180">
            </el-table-column>
            <el-table-column prop="successNum"   
              width="90"       
              label="已通过">
              <template slot-scope="scope">
                <el-tag type="success" effect="dark">{{scope.row.successNum}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="dataOrDocNum"
              width="160"
              label="数据或资料未上传">
              <template slot-scope="scope">
                 <el-tag type="warning" effect="dark">{{scope.row.dataOrDocNum}}</el-tag>
              </template>
            </el-table-column>  
            <el-table-column prop="earlyWarningNum"
              width="80"
              label="预警"
            >
              <template slot-scope="scope">
                 <el-tag type="danger" effect="dark">{{scope.row.earlyWarningNum}}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="agent"   
              width="90"       
              label="经办人">             
            </el-table-column>
            <el-table-column prop="regDate"  
              width="120"          
              label="注册时间">
            </el-table-column>
            <el-table-column label="阶段数据资料" width="120">
              <template slot-scope="scope">
                <el-button @click="drawer = true" :title="scope.row.projectName" type="primary">
                  数据资料
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple">          
          <el-tag type="info" size="medium" class="title_model">
              审批阶段
          </el-tag>
          <div class = "content_cls">
            <div>项目建议书</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>可行性研究报告</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>建设项目选址意见书</div>            
            <el-tag type="warning" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>建设项目选址意见书</div>
            <el-tag type="warning" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>用地预审</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>节能评估及审查</div>
            <el-tag type="warning" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>环境影响评价报告</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>建设项目选址意见书</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>通航影响评价意见</div>
            <el-tag type="warning" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>初步设计</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>建设用地规划许可证</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>不动产权证</div>
            <el-tag type="warning" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>水土保持方案审批</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>施工图设计文件审查合格书</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>消防设计审查意见书</div>
            <el-tag type="warning" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>建设工程规划许可证</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>施工许可证</div>
            <el-tag type="danger" effect="dark"/>
          </div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          <el-tag type="info" size="medium" class="title_model">
              招投标阶段
          </el-tag>

          <div class = "content_cls">
            <div>发改委招投标核准意见</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>招标组织形式</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>招标方式</div>
           <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>预算评审</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>招标备案表</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>招标公告、招标文件</div>
            <el-tag type="warning" effect="dark"/>
          </div>
          <!-- <div class = "content_cls">
            <div>水土保持方案审批</div>
            <el-tag type="success" effect="dark"/>
          </div> -->
          <div class = "content_cls">
            <div>投标资料</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>专家选定资料</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>评标过程资料</div>
            <el-tag type="warning" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>评标报告</div>
            <el-tag type="warning" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>评标公示文件</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>中标通知书</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>施工合同</div>
            <el-tag type="danger" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>安全、质量监督备案</div>
            <el-tag type="success" effect="dark"/>
          </div>
          
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">          
          <el-tag type="info" size="medium" class="title_model">
              施工阶段
          </el-tag>
          <div class = "content_cls">
            <div>开工报告</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>分包管理</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>人员情况</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>安全管理、质量管理</div>
            <el-tag type="success" effect="dark"/>
          </div>
         
        </div>
      </el-col>
      <el-col :span="6">
        <div class="grid-content bg-purple">
          
          <el-tag type="info" size="medium" class="title_model">
              竣工阶段
          </el-tag>
          <div class = "content_cls">
            <div>工期管理</div>
            <el-tag type="success" effect="dark"/>
          </div>

          <div class = "content_cls">
            <div>安全质量监督报告</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>环保验收</div>
            <el-tag type="success" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>项目竣工结算审核报告</div>            
            <el-tag type="danger" effect="dark"/>
          </div>
          <div class = "content_cls">
            <div>项目指标分析</div>
          </div>

        </div>
      </el-col>
    </el-row>
    <el-drawer
      title="项目资料"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose">
      <el-button plain>数据资料在线预览</el-button>
      <el-button plain>数据打包下载</el-button>
      <el-button plain>资料打包下载</el-button>
    </el-drawer>
  </div>
</template>

<script>
  import {
    listProjectCatory,
    listProjectBaseInfoList,
    getProject
  } from "@/api/xmgl/xmxx/xmzc";
  import {
    listEarlyWarns
  } from "@/api/audit/earlyWarn/index";

  import {
    getToken
  } from "@/utils/auth";
  import {
    treeselect
  } from "@/api/system/dept";
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";

  export default {
    name: "project",
    components: {
      Treeselect
    },
    
    data() {
      return {
        // 遮罩层
        loading: true,
        tableDataProject:[],
        drawer: false,
        direction: 'rtl',
      };
    },
    watch: {

    },
    created() {
      this.loadProject();
    },
    methods: {

      loadProject(){
        this.tableDataProject = [{
          'projectName':'xxx项目',
          'projectCode':'xz00001',
          'agent':'经办人',
          'regDate':'2016',
          'successNum':28,
          'dataOrDocNum':9,
          'earlyWarningNum':3
        }];
      },
      /** 项目详情页面按钮操作 */
      handleInfos(row) {
        $.modal.openFull("项目预警详情", '@/earlyWarnInfos', width, height);
      },
      
      //跳转至项目详情页面
      handleShowBiddetail() {
        this.$router.push('/project/biddetail');
      },

      /** 导出按钮操作 */
      handleExport() {
        const queryParams = this.queryParams;
        this.$confirm('是否确认导出所有用户数据项?', "警告", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function () {
          return exportUser(queryParams);
        }).then(response => {
          this.download(response.msg);
        }).catch(function () {});
      }

    }
  };

</script>

<style lang="scss" scoped>
  .el-row {
    margin-bottom: 20px;

    &:last-child {
      margin-bottom: 0;
    }
  }

  .el-col {
    border-radius: 4px;
  }

  .bg-purple-dark {
    background: #99a9bf;
  }

  .bg-purple {
    background: #d3dce6;
  }

  .bg-purple-light {
    background: #e5e9f2;
  }

  .grid-content {
    border-radius: 4px;
    min-height: 36px;
    align-content: center;
  }

  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }

  .dropbtn_cls{
    width: 265px;
  }

  .title_cls{
    font-size: 30px;
    display: flex;
    justify-content: center;
  }

  .title_date {
    float: right;
    margin-right: 30%;
    font-size: 14px;
    margin-top: 10px;
    color: gray;
  }

  .content_cls{
    padding: 12px;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
  }

 .title_model{
   width:100%;height:50px;font-weight:bold;font-size:18px;text-align: center;padding: 10px;
 }
</style>
